<template>
    <div class="layout">
        <!-- 导航栏 -->
        <Navigation class="menu" :isCollapse='isCollapse'/>
        <!-- 内容展示 -->
        <Content class="content" :class="{isActive:isCollapse}" @setIsCollapse='setIsCollapse' :isCollapse='isCollapse'/>
    </div>
</template>

<script>
import Navigation from './Navigation.vue'
import Content from './Content.vue'
    export default{
        components:{
            Navigation,
            Content
        },
        methods: {
            setIsCollapse(){
                this.isCollapse=!this.isCollapse
            }
        },
        data() {
            return {
                isCollapse:false
            }
        },
    }
</script>

<style lang='less' scoped>
.layout{
    .menu{
        background: rgb(12, 103, 133);
        position: fixed;
        top: 0;
        bottom: 0;

    }
    .content{
        margin-left: 200px;
    }
    .isActive{
        margin-left: 64px;
    }
}

</style>